<template>
  <div class="piclist">
    <div v-for="sp in spList" :key="sp.ProductNo" class="pic">
      <sp-card :url-base="urlBase" :product="sp"></sp-card>
    </div>
  </div>
</template>

<script>
import spCard from "./c_spcard";
import {
  getSpCardList //url: '/Product/GetSpCardList'
} from "@/api/product";
export default {
  components: { spCard },
  data() {
    return {
      urlBase:'',
      spList: [], //商品列表
      queryCondidate: {
        page_index: 1,
        page_size: 20,
      }
    };
  },
  created() {
    getSpCardList(this.queryCondidate).then(r => {
      if (r.code == 0) {
        this.urlBase=r.data.url_base;
        this.spList = r.data.page_data.list;
      } else {
        this.$message.error("获取商品列表出错！原因：" + response.msg);
      }
    });
  }
};
</script>

<style lang="scss" scoped>
//下级组件也可用
.piclist {
  margin: 5px -5px 0 -5px;

  .pic {
    float: left;
    padding: 5px;
    width: 20%;
  }
}
</style>